<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: flex-start;
            border: 1px solid black;
            padding-left: 5px;
        }

        .flex-item {
            /* flex-basis: 200px; */
            background-color: lightblue;
            margin: 5px;
            text-align: center;
            line-height: 50px;
            /* 垂直居中 */
        }

        .item1 {
            flex-basis: 100px;
        }

        .item2 {
            flex-basis: 200px;
        }

        .item3 {
            flex-basis: 300px;
        }
    </style>
</head>

<body>
    <p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。</p>
    <p>浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
    <p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
        可以使用百分比数值,百分比数值加上最小值（最小宽高）的使用场景也很多。</p>
    <p>1. width属性：
        - 应用对象：适用于所有块级元素。
        - 作用：明确地设置元素的宽度，不会受到Flexbox布局的影响。
        - 优先级：当元素没有设定flex-basis时，width会生效；当flex-basis设定时，flex-basis的值会覆盖width的值。

        1. flex-basis属性：
        - 应用对象：只适用于Flexbox布局中的元素。
        - 作用：设置元素的初始大小（宽度或高度，取决于主轴的方向），这是在分配剩余空间之前元素的大小。
        - 优先级：flex-basis的值优先于width，如果同时设置了flex-basis和width，flex-basis会覆盖width的值。
        - 默认值：auto，这意味着元素的大小是其内容的大小或width/height的值。
    </p>
    <div class="flex-container">
        <div class="flex-item item1">Item 1</div>
        <div class="flex-item item2">Item 2</div>
        <div class="flex-item item3">Item 3</div>
    </div>
</body>

</html>